<template>
  <section>
    <el-button type="text" @click="addGoodsType" size="mini">添加新类型</el-button>
    <el-row>
      <el-table :data="goodsTypes" style="width: 100%" size="mini">
        <el-table-column type="index" width="30" >
        </el-table-column>
        <el-table-column label="类型名称">
          <template slot-scope="scope">
            <el-input v-show="scope.row.edit" size="mini" v-model="scope.row.name"></el-input>
            <span  v-show="!scope.row.edit">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型编码">
          <template slot-scope="scope">
            <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.code"></el-input>
            <div v-show="!scope.row.edit">{{scope.row.code}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button :type="scope.row.edit?'success':'primary'" @click='confirm(scope.row)' size="mini" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
            <el-button @click='del(scope)' size="mini" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex';
  import DateFormat from '@/common/date-formater'
  import schedule from "../../sdk/api/schedule";
  import department from "../../sdk/api/department";
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "goodsType",
    data() {
      return {
        goodsTypes:[],
        companies:[],
        departments:[],
        companyId:null,
        departmentId:null,
      }
    },
    watch:{
      companyId(nv,ov){
        if(nv){
          console.log(nv)
          this.loadDepartments(nv)//加载部门列表，用于选择
        }
      },
      departmentId(nv,ov){
        if(nv){
          console.log(nv)
          //加载商品类型列表，用来显示
          this.loadGoodsTypes()
        }
      }
    },
    created(){
      //加载公司列表，用于选择
      this.loadCompanyList()

      this.loadGoodsTypes()
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      loadCompanyList(){
        //加载公司列表
        this.fetch({name:"getCompanyList"})
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              console.log(res)
              this.companies = res
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },
      loadDepartments(companyId){//部门列表

        this.fetch({name:"getDepartmentList",data:{companyId}})
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              console.log(res)
              this.departments = res
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },
      loadGoodsTypes(){
        // getGoodsTypeList
        this.fetch({name:"getGoodsTypeList"})
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              console.log(res)
              this.goodsTypes = res
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },
      addGoodsType(){
        let tmp ={name:'',department:{id:'',name:''},edit:true}
        this.goodsTypes.push(tmp)
      },
      reDepartmentName(scope){

      },
      confirm(row){
        if(row.edit && row.edit === true){//目前是编辑状态
          //判断是否新创建
          if(row.id){//非新建，有id，要更新
            this.updateGoodsType(row)
          }
          else {//新建的，有edit
            //保存新
            this.saveGoodsType(row)
            row.edit = !row.edit
          }
        }else {
          //点击之前是非编辑状态，改成编辑状态
          if(row.edit === undefined){
            Vue.set(row,'edit',true)//后续添加属性，需要vue联动
          }else {
            row.edit = true
          }
        }
      },
      updateGoodsType(row){
        console.log(row)
        this.fetch({name:"updateGoodsType",data:row})//--------------------
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              console.log(res)
              row.edit = false
              console.log(this.goodsTypes)
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },
      saveGoodsType(row){
        console.log(row)
        this.fetch({name:"createGoodsType",data:row})//-----------------------
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              console.log(res)
              row.id=res.id
              console.log(this.goodsTypes)
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      }
    }
  }
</script>

<style scoped>

</style>
